<template>
  <Container class="brand-list">
    <div class="container-header group" slot="header">
      <Input class="start" v-model.trim="list.policyName" placeholder="规则名称" @on-enter="onSearchBtnClick"/>
      <Button type="primary" icon="ios-search" class="btn-search" @click="onSearchBtnClick"></Button>
    </div>
    <Tabs v-model="tab">
      <Button
        size="large"
        class="item"
        type="primary"
        slot="extra"
        icon="md-add"
        @click="onAdd"
      >添加规则</Button>
      <TabPane label="扫码政策设置" name="tab1">
        <Table
          :height="options.tableHeight"
          stripe
          :columns="list.columns"
          :data="list.data"
          no-data-text="亲，没有找到相关记录哦！~"
        ></Table>
        <div class="pager">
          <Page
            :total="list.totalItem"
            :current="list.currentPage"
            :page-size="list.pageSize"
            @on-change="onPageChange"
            @on-page-size-change="onPageSizeChange"
            show-sizer
            placement="top"
          ></Page>
        </div>
        <Loader :status="list.status" @refresh="getData"></Loader>
      </TabPane>
    </Tabs>
    <ScanCodeEditItem ref="storeEdit" @complete="getData"></ScanCodeEditItem>
  </Container>
</template>
<script>
import table from '@/table'
import ScanCodeListData from './list/ScanCodeListData'
import ScanCodeEditItem from './edit/ScanCodeEditItem'
import { clearEmpty } from '@/util'
export default {
  name: 'policy/scanCode/list',
  components: {
    ScanCodeEditItem
  },
  data() {
    return {
      tab: 'tab1',
      list: ScanCodeListData,
      options: {
        tableHeight: 300
      },
    }
  },
  mounted() {
    this.list.currentPage = ~~this.$route.query.currentPage || 1
    this.list.pageSize = ~~this.$route.query.pageSize || this.list.pageSize
    this.initTable()
    this.$bus.$on('onAdd', this.onAdd)
    this.$bus.$on('onEdit', this.onEdit)
    this.$bus.$on('onDelete', this.onDelete)
    this.getData()
  },
  destroyed() {
    this.$bus.$off()
  },
  methods: {
    ...table,
    onSearchBtnClick() {
      this.list.currentPage = 1
      this.getData()
    },
    getData() {
      let param = {
        current: this.list.currentPage,
        size: this.list.pageSize,
        policyName: this.list.policyName
      }
      param = clearEmpty(param)
      this.list.status = 'loading'
      this.$ajaxGet('/setting/scancode_policy/page', param).then(data => {
        this.list.data = []
        this.list.totalItem = Number(data.total)
        this.list.data = (data.records || []).map(item => {
          return {
            id: item.id,
            policyName: item.policyName,
            effectiveDays: item.effectiveDays,
            distance: item.distance,
            provinceName: item.provinceName,
            cityName: item.cityName,
            isSystem: item.isSystem
          }
        })
        this.list.status = 'pass'
        this.backTableTop()
      }).catch(() => {
        this.list.status = 'error'
      })
    },
    onAdd() {
      this.$refs.storeEdit.updateForm()
    },
    onEdit(id) {
      this.$refs.storeEdit.updateForm(id)
    },
    onDelete(id, index) {
			this.$Modal.confirm({
        title: '删除',
        content: '确定删除扫码政策设置吗？',
        onOk: () => {
          this.$ajaxPost(`/setting/scancode_policy/delete/${id}`).then(data => {
            this.$Notice.success({
              title: '删除成功',
              desc: `<span class="font-red">${id}</span> 已被删除。`
            })
            this.list.data.splice(index, 1)
          })
        }
      })
		},
    onPageChange(number) {
      this.list.currentPage = number
      this.$router.push({
        name: 'policy/scanCode/list',
        query: {
          currentPage: this.list.currentPage,
          pageSize: this.list.pageSize
        }
      })
      this.getData()
    },
    onPageSizeChange(pageSize) {
      this.list.currentPage = 1
      this.list.pageSize = pageSize
      this.$router.push({
        name: 'policy/scanCode/list',
        query: {
          currentPage: this.list.currentPage,
          pageSize: this.list.pageSize
        }
      })
      this.getData()
    }
  },
  watch: {
    $route() {
      let page = ~~this.$route.query.currentPage
      let table = this.list
      if (table.currentPage !== page) {
        table.currentPage =
          ~~this.$route.query.currentPage === 0
            ? 1
            : ~~this.$route.query.currentPage
        this.getData()
      }
    }
  }
}
</script>